<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>字典列表</title>
  <link rel="stylesheet" th:href="@{/layui-v2.6.8/css/layui.css}" href="/static/layui-v2.6.8/css/layui.css">
</head>
<body>
<!-- 内容主体区域 -->
<div style="padding: 30px;">
  <div class="layui-row layui-col-space15" >
    <div class="layui-panel" style="padding: 10px;height: 40px">
      <form action="/amin/dictList/getDictList">
        <div class="layui-col-md3" style="width: 25%;">
          <label class="layui-form-label">字典类型:</label>
          <div class="layui-input-inline" style="width: 40%;">
            <select name="dictType" id="dictType"  lay-verify="required" th:field="${sDictList.dictType}" lay-search="" class="layui-input" >
              <option th:each="dict,dictStat:${dicts}" th:value="${dict.dictType}" th:text="${dict.dictName}">所有</option>
            </select>
          </div>
        </div>
        <div class="layui-col-md3" style="width: 25%;">
          <label class="layui-form-label">字典标签:</label>
          <div class="layui-input-inline">
            <input type="text" name="dictTitle"  th:field="${sDictList.dictTitle}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-col-md3" style="width: 25%;">
          <label class="layui-form-label">字典状态:</label>
          <div class="layui-input-inline" style="width: 40%;">
            <select name="dictState"  lay-verify="required" th:field="${sDictList.dictState}" lay-search="" class="layui-input" >
              <option value="">所有</option>
              <option th:each="dictState,dictStateStat:${systemSwitchType}" th:value="${dictState.dictKey}" th:text="${dictState.dictTitle}">正常</option>
            </select>
          </div>
        </div>
        <div class="layui-col-md3" style="width: 25%;">
          <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formSubmit">查询</button>
            <input type="reset" class="layui-btn" value="重置">
          </div>
        </div>
      </form>
    </div>
  </div>
  <br>
  <div id="layerDemo" class="layui-col-md12" style="margin-top: 10px;">
    <!-- <input type="button" value="添加角色" class="layui-btn">-->
    <button data-method="addDict" class="layui-btn">添加</button>
  </div>
  <div class="layui-col-md12">
    <table class="layui-table" id="edit_dict">
      <colgroup>
        <col width="100">
        <col width="150">
        <col width="200">
        <col width="100">
        <col width="200">
        <col width="200">
        <col>
      </colgroup>
      <thead>
      <tr>
        <th>序号</th>
        <th>字典标签</th>
        <th>字典键值</th>
        <th>状态</th>
        <th>备注</th>
        <th>创建时间</th>
        <th>管理</th>
      </tr>
      </thead>
      <tbody th:each="dictList,dictListStat:${dictList.list}">
      <tr>
        <td th:text="${dictListStat.index+1}"></td>
        <td th:text="${dictList.dictTitle}"></td>
        <td th:text="${dictList.dictKey}"></td>
        <td >
          <button th:each="dictState,dictStateStat:${systemSwitchType}" th:if="${dictList.dictState == dictState.dictKey}" th:text="${dictState.dictTitle}" th:class="${dictState.dictStyle}"></button>
        </td>
        <td th:text="${dictList.remarks}"></td>
        <td th:text="${#dates.format(dictList.createdTime,'yyyy-MM-dd')}"></td>
        <td>
          <button  th:data-value="${dictList.id}"  data-method="editDict" class="layui-btn layui-btn-sm layui-btn-normal">编辑</button>
          <button  th:data-value="${dictList.id}"  data-method="delDict" class="layui-btn layui-btn-sm layui-btn-normal layui-bg-red">删除</button>
        </td>

      </tr>
      </tbody>
    </table>
    <div class="layui-box layui-laypage layui-laypage-molv" id="layui-laypage-3">
      <a th:href="@{'/dict/getDictList?pageNum='+${dictList.pageNum -1}}" class="layui-laypage-prev" data-page="0">上一页</a>
      <a th:href="@{'/dict/getDictList?pageNum='+${dictList.pageNum +1}}"  class="layui-laypage-next" data-page="2">下一页</a></div>
    &emsp;&emsp;总<span th:text="${dictList.total}"></span>条
  </div>
</div>
</body>
<!-- 引入 layui.js -->
<script th:src="@{/layui-v2.6.8/layui.js}" src="/static/layui-v2.6.8/layui.js"></script>
<script th:src="@{/jquery-3.5.1/jquery-3.5.1.min.js}" src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>

<script>
  layui.use(function(){
    var layer = layui.layer
            ,form = layui.form;
    var href = '/amin/dictList/createDict';
    var dictId = 0;
    //触发事件
    var active = {
      addDict: function(){
        var that = this;
        //多窗口模式，层叠置顶
        layer.open({
          type: 2 //此处以iframe举例
          ,title: '添加字典'
          ,area: ['100%', '100%']
          ,shade: 0
          ,tipsMore: false
          ,maxmin: true
          ,offset: [ //为了演示，随机坐标
            /* ($(window).height())
             ,($(window).width())*/
            0,0
          ]
          ,content: href+"?dictType="+$("#dictType").val()
          ,zIndex: layer.zIndex //重点1
          ,success: function(layero, index){
            layer.addDict(layero); //重点2. 保持选中窗口置顶

            //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
            layer.escIndex = layer.escIndex || [];
            layer.escIndex.unshift(index);
            //选中当前层时，将当前层索引放置在首位
            layero.on('mousedown', function(){
              var _index = layer.escIndex.indexOf(index);
              if(_index !== -1){
                layer.escIndex.splice(_index, 1); //删除原有索引
              }
              layer.escIndex.unshift(index); //将索引插入到数组首位
            });
          }
          ,end: function(){
            //更新索引
            if(typeof layer.escIndex === 'object'){
              layer.escIndex.splice(0, 1);
            }
          }
        });
      }
      ,editDict: function(){
        var that = this;
        //多窗口模式，层叠置顶
        layer.open({
          type: 2 //此处以iframe举例
          ,title: '编辑字典'
          ,area: ['100%', '100%']
          ,shade: [0.8, '#393D49']
          ,maxmin: true
          ,tipsMore: false
          ,offset: [ //为了演示，随机坐标
            0,0
          ]
          ,content: href+"?id="+dictId
          ,zIndex: layer.zIndex //重点1
          ,success: function(layero, index){
            //layer.editDict(layero); //重点2. 保持选中窗口置顶
            //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
            layer.escIndex = layer.escIndex || [];
            layer.escIndex.unshift(index);

            //选中当前层时，将当前层索引放置在首位
            layero.on('mousedown', function(){
              var _index = layer.escIndex.indexOf(index);
              if(_index !== -1){
                layer.escIndex.splice(_index, 1); //删除原有索引
              }
              layer.escIndex.unshift(index); //将索引插入到数组首位
            });
          }
          ,end: function(){
            //更新索引
            if(typeof layer.escIndex === 'object'){
              layer.escIndex.splice(0, 1);
            }
          }
        });
      },delDict: function(){
        var that = this;
        layer.confirm('确定要删除这条数据吗?', {icon: 3, title:'提示'}, function(index){
          window.location.href =window.document.location.origin+"/amin/dictList/delById?id="+dictId ;
          layer.close(index);
        });
      }
    };

    $('#layerDemo .layui-btn').on('click', function(){
      var othis = $(this), method = othis.data('method');
      active[method] ? active[method].call(this, othis) : '';
    });
    $('#edit_dict .layui-btn').on('click', function(){
      var othis = $(this), method = othis.data('method');
      dictId = othis.data('value');
      active[method] ? active[method].call(this, othis) : '';
    });

    //监听提交
    form.on('submit(formSubmit)', function(data){
      layer.msg(JSON.stringify(data.field));
      return true;
    });
  });
</script>
</html>